[給心理人的前端網頁開發] 16 關卡二：網路問卷 - 在 CodeSandBox 上寫前端網頁問卷

2023 iThome 鐵人賽

DAY 16

Modern Web

給心理人的前端網頁開發系列第 16 篇

[給心理人的前端網頁開發] 16 關卡二：網路問卷 - 在 CodeSandBox 上寫前端網頁問卷

15th鐵人賽

ayugioh2003

2023-10-01 23:08:54

308 瀏覽

分享至

關卡二要做出一個網路問卷系統。昨天講了用 Google App Script 當作後端，今天則是要做出前端網頁，讓整個網路問卷能順利運作。

請先看 demo

[給心理人的前端網頁開發] 關卡三網路問卷 - CodeSandbox

一、HTML 部份

主要由一個 form 表單所組成。再來裡面有很多的 form 內部常用元素，例如 label (標籤)、input (輸入框)、textarea (更大的輸入框)。詳細元素用途請參照延伸閱讀。

<form id="netForm">
  <label class="block">
    <span>暱稱</span>
    <input type="text" name="name" />
  </label>
  <label class="block">
    <span>自介</span>
    <textarea name="intro" rows="3" cols="19"></textarea>
  </label>
  <div class="block">
    <span>生理性別</span>
    <div>
      <label>
        <input type="radio" name="sex" value="male" checked />
        <span>男der</span>
      </label>

      <label>
        <input type="radio" name="sex" value="female" />
        <span>女der</span>
      </label>

      <label>
        <input type="radio" name="sex" value="others" />
        <span>其他</span>
      </label>
    </div>
  </div>
  <label class="block">
    <span>年齡</span>
    <input type="number" name="age" />
  </label>
  <label class="block">
    <span>身高(cm)</span>
    <input type="number" name="height" />
  </label>
  <label class="block">
    <span>體重(kg)</span>
    <input type="text" name="number" />
  </label>
  <label class="block">
    <span>怎麼接觸到此文章的</span>
    <textarea name="why" rows="3" cols="19"></textarea>
  </label>
  <label class="block">
    <span>其他想說的話</span>
    <textarea name="note" rows="3" cols="19"></textarea>
  </label>
  <div class="button-area">
    <button>
      送出資料
    </button>
  </div>
</form>

二、JavaScript 部份

整個 JS 的流程大概長這樣：

畫面初始化
- 取得 button, form 元素
- 監聽 button 的一舉一動，這邊是指被點擊時會觸發的 click 事件
點擊按鈕
1. 取得 form 的資料
2. 傳送資料給後端

詳細語法用途請參考延伸閱讀。

var button = document.querySelector("button");
var form = document.querySelector("form");
var api =
  "https://script.google.com/macros/s/AKfycbz-mSZJlJ8yo_8ixaoeDp5zCvuDjKdpGvfOf6wYBywJVvkSS4D8YJ0S6s3X1bFS7wJH/exec";

// function: 取得 form 的資料
function getFormData() {
  var formData = new FormData(form); // 取得 form 的資料們
  var data = Object.fromEntries(formData.entries()); // 一筆一筆取得資料，轉成物件格式
  return data;
}

// function: 送出 form 的資料到後端
function sentFormData(event) {
  event.preventDefault(); // 避免瀏覽器預設的送出表單行為產生
  var formData = getFormData(); // 執行函式，取得 form 資料

  fetch(api, {
    method: "POST", // 通常新增資料時，後端工程師會將 API 設計成使用 POST 方法
    body: JSON.stringify(formData), // 請求中的內容放剛剛的 form 資料
    headers: new Headers({
      "Content-Type": "text/plain;charset=utf-8" // 請求中的內容類型是純文字格式
    })
  })
    .then((res) => res.json())
    .catch((error) => console.error("Error:", error))
    .then((response) => {
      console.log("Success:", response);
      alert("成功送出問卷！");
      form.reset(); // 重設表單資料
    });
}

// 註冊 click 點擊事件監聽器
// 當 button 被點擊，則執行 sentFormData 函式
button.addEventListener("click", sentFormData);